<template>
  <CollapsibleSection
    title="就诊机构"
    :is-expanded="isExpanded"
    @toggle="$emit('toggle')"
  >

    <!-- 选择医院和科室按钮 -->
    <view class="hospital-selector" @click="showDirectoryPopup">
      <view class="selector-content">
        <text class="selector-text">
          <!-- {{ getSelectorText() }} -->
          点击选择就诊机构、部门（大科）、科室（专业）、项目 
        </text>
        <text class="selector-arrow">▼</text>
      </view>
    </view>
    
    <!-- 使用新的医院-部门-科室-项目组选择器 -->
    <HospitalDepartmentProjectSelector
      :visible="showPopup"
      @update:visible="showPopup = $event"
      @close="closeDirectoryPopup"
      @confirm="handleSelectorConfirm"
    />
    
    <!-- 显示已选择的信息 -->
    <view v-if="formData.hospital || formData.department || formData.dept || formData.project" class="mt-[24rpx] p-[20rpx] bg-blue-50 rounded-[12rpx]">
      <text class="block text-[24rpx] font-bold text-gray-700 mb-[12rpx]">已选择:</text>
      <view class="space-y-[8rpx]">
        <view v-if="formData.hospital" class="flex items-center">
          <text class="text-[22rpx] text-gray-600 w-[120rpx]">医院:</text>
          <text class="text-[22rpx] text-blue-600 flex-1">{{ formData.hospital }}</text>
        </view>
        <view v-if="formData.department" class="flex items-center">
          <text class="text-[22rpx] text-gray-600 w-[120rpx]">部门:</text>
          <text class="text-[22rpx] text-blue-600 flex-1">{{ formData.department }}</text>
        </view>
        <view v-if="formData.dept" class="flex items-center">
          <text class="text-[22rpx] text-gray-600 w-[120rpx]">科室:</text>
          <text class="text-[22rpx] text-blue-600 flex-1">{{ formData.dept }}</text>
        </view>
        <view v-if="formData.project" class="flex items-center">
          <text class="text-[22rpx] text-gray-600 w-[120rpx]">项目组:</text>
          <text class="text-[22rpx] text-blue-600 flex-1">{{ formData.project }}</text>
        </view>
      </view>
    </view>
  </CollapsibleSection>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import Taro from '@tarojs/taro'
import { useMedicalRecordStore } from '@/store/modules'
import CollapsibleSection from '@/components/CollapsibleSection.vue'
import HospitalDepartmentProjectSelector from '@/components/HospitalDepartmentProjectSelector.vue'

interface Props {
  isExpanded: boolean
}

interface Emits {
  (e: 'toggle'): void
}

defineProps<Props>()
defineEmits<Emits>()

const medicalRecordStore = useMedicalRecordStore()

const formData = computed(() => {
  const storeData = medicalRecordStore.getData
  if (storeData) {
    return storeData
  }
  return medicalRecordStore.getDefaultFormData()
})

// 弹窗状态
const showPopup = ref(false)

// 已在模板中改为静态文案，保留逻辑可在需要时恢复

// 显示目录选择弹窗
const showDirectoryPopup = () => {
  showPopup.value = true
}

// 关闭目录选择弹窗
const closeDirectoryPopup = () => {
  showPopup.value = false
}


// 处理新选择器确认选择
const handleSelectorConfirm = (data: any) => {
  console.log('确认选择:', data)
  const { hospital, team, department, project } = data
  
  if (hospital) {
    medicalRecordStore.updateField('hospital', hospital.title || hospital.name)
  }
  if (team) {
    medicalRecordStore.updateField('department', team.title || team.name)
  }
  if (department) {
    medicalRecordStore.updateField('dept', department.title || department.name)
  }
  if (project) {
    medicalRecordStore.updateField('project', project.title || project.name)
  }
  
  console.log('更新后的表单数据:', formData.value)
  showPopup.value = false
  Taro.showToast({
    title: '选择成功',
    icon: 'success',
    duration: 1500
  })
}
</script>

<style scoped lang="scss">
.hospital-selector {
  border: 1rpx solid #e5e7eb;
  border-radius: 12rpx;
  background: white;
  cursor: pointer;
  transition: all 0.2s ease;
  
  &:hover {
    border-color: #3b82f6;
  }
  
  &:active {
    opacity: 0.8;
  }
  
  .selector-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 32rpx;
    
    .selector-text {
      font-size: 28rpx;
      color: #374151;
      flex: 1;
      
      &:empty::before {
        content: attr(placeholder);
        color: #9ca3af;
      }
    }
    
    .selector-arrow {
      font-size: 24rpx;
      color: #9ca3af;
      margin-left: 16rpx;
      transition: transform 0.2s ease;
    }
  }
  
  &:active .selector-arrow {
    transform: rotate(180deg);
  }
}

// 医院弹窗样式
.hospital-popup {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: white;
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32rpx;
    border-bottom: 1rpx solid #f0f0f0;
    position: relative;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .close-btn {
      position: absolute;
      right: 32rpx;
      top: 50%;
      transform: translateY(-50%);
      width: 56rpx;
      height: 56rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40rpx;
      color: #999;
      cursor: pointer;
      
      &:active {
        opacity: 0.6;
      }
    }
  }
  
  .popup-content {
    flex: 1;
    overflow-y: auto;
    padding: 16rpx;
    display: block;
  }
}
</style>
